<template>
<div class="box"></div>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup () {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        console.log(isIntersecting)
        targetIsVisible.value = isIntersecting
      }
    )

    console.log(stop)
    console.log(target)
    console.log(targetIsVisible)

    return {
      target,
      targetIsVisible
    }
  }
}
</script>

<style lang="less" scoped>
.box{
    height: 800px;
}
</style>
